<script setup lang="ts">
import * as Cesium from "cesium";
import { onMounted, defineExpose } from "vue";
import {useEarthStore} from '../stores/earthObj'
import { storeToRefs } from 'pinia'

let store = useEarthStore();
const {initViewer} = storeToRefs(store);

Cesium.Ion.defaultAccessToken = window['GVConfig']?.token || "";
let viewer:any;

onMounted(() => {
    init();
});

const init = ()=>{
    viewer = new Cesium.Viewer("EarthContainer", {
        // 使用默认的影像图层和地形图层
        homeButton:false,
        geocoder:false,
        vrButton:false,
        timeline:false,
        navigationHelpButton:false,
        fullscreenButton:false,
        infoBox:false,
        selectionIndicator:false,
        sceneModePicker:false,
        animation:false,
        scene3DOnly:false,
    }); 
    // 关闭logo图标
    viewer.cesiumWidget.creditContainer.style.display = "none";
    
    // 使用pinia中的方法，给地图图层对象初始化
    store.initViewer(viewer);
}

</script>
<template>
    <div id="EarthContainer"></div>
</template>
<style scoped>
#EarthContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>